<template>
	<div>
		<div id="header">
			<div class="header-title" style="position: fixed;top: 0;">
				<em><a href="javascript:;" @click='nextTip'>下一步</a></em>
			</div>
		</div>
		<div class="addNeworder" style="margin-bottom:2.5rem ">
			<div class="material-list">
				<ul class="material_list">
					<li v-for="(item,index) in content" :key=index @click="deleteMaterial(item.weight,item.materialName,item.id,item.unitPrice,item.zazhiPercent,item.materialNo)">
						<p><span>{{item.materialName}}</span><img src="../../images/right.png"></p>
						<p><span>物料重量</span><b>{{item.weight}}<em>吨</em></b></p>
						<p><span>物料单价</span><b>{{item.unitPrice}}<em>元/吨</em></b></p>
						<p><span>含杂比例</span><b>{{item.zazhiPercent}}<em>%</em></b></p>
					</li>
				</ul>
			</div>
		</div>
		<div class="demos-content-padded">
			<!--<a href="javascript:;" class=" default" style="border-right: 1px solid #e2e2e2">取消</a>-->
			<router-link :to="{path:'addMaterial',query:{orderNo:this.orderNo,orderid:this.orderid}}">
				<a class=" primary weui-btn_primary" style="width: 100%;color: #fff;">添加物料</a>
			</router-link>
		</div>
		<div class="fault-tolerant" v-show='errImgShow'>
			<img src="../../images/box.png" alt="">
			<span>暂无物料，请点击下方添加物料</span>
		</div>
	</div>
</template>

<script>
	import {
		getOrderMaterialList
	} from '../../config/api'
	import { TopTips } from 'we-vue'
	export default {
		data() {
			return {
				orderNo: this.$route.query.orderNo,
				orderid:this.$route.query.orderid,
				errImgShow: false,
				content: ''
			}
		},
		created() {
			getOrderMaterialList(this.orderNo).then(res => {
				console.log(res)
				if (res.code == 100) {
					this.content = res.content
				}
				if(this.content==''){
					this.errImgShow = true
				}
			}).catch(err => console.log(err))
		},
		mounted() {

		},
		methods: {
			deleteMaterial(weight,materialName,id,unitPrice,zazhiPercent,materialNo) {
				this.$router.push({
					path:"/deleteMaterial",
					query:{
						orderNo:this.orderNo,
						orderid:this.orderid,
						id,
						weight,
						materialName,
						unitPrice,
						zazhiPercent,
						materialNo
					}
				})
			},
			nextTip(){
				if(this.content==""){
					TopTips({
					  message: '请先添加物料',
					  duration: 1200
					})
				}else{
					this.$router.push({
						path:'/waitsubmitOrder',
						query:{
							orderid:this.orderid
						}
					})
				}
			},
			addMaterial(){
				
			}
		},
	}
</script>

<style scoped="scoped">
	.fault-tolerant {
		width: 100%;
		height: 80%;
		text-align: center;
	}

	.fault-tolerant img {
		margin-top: 5rem;
	}

	.fault-tolerant span {
		width: 100%;
		height: auto;
		text-align: center;
		display: inline-block;
		font-size: 0.8rem;
		padding-top: 1rem
	}

	.demos-content-padded {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 2.5rem;
		line-height: 2.5rem;
		margin-bottom: 0;
		padding: 0;
		background: #fff;
		border-top: 1px solid #e2e2e2
	}

	.demos-content-padded a {
		width: 100%;
		float: left;
		box-sizing: border-box;
		text-align: center;
		display: inline-block;
		color: #444;
	}

	.header-title em a {
		color: #9c9c9c;
	}
</style>
